import * as React from "react";
import {Button, DatePicker, Form, Input, Spin, Statistic, Table} from "antd";
import API from "../../api/api";
const { RangePicker } = DatePicker;
const {Search} = Input;

export default class NoticeLog extends React.Component{
    constructor(props) {
        super(props);
        this.state={
            current:1,
            count:null,
            data:[],
            spinFlag:false,
            pageSize:10,
        }
        let result = API.getNoticeLog();
        this.state.data = result.data;
        this.state.count = result.count;
    }

    searchKey = "";
    personNo = "";
    startDate = "";
    endDate = "";
    startDate2 = "";
    endDate2 = "";

    // "NOTICE_LOG_ID": 6.0,
    // "NOTICE_ID": 2148.0,
    // "USER_IP": "172.18.133.56",
    // "IS_DELETE": "N",
    // "NOTICE_TITLE": "065号公告—2021年第18-19周 掌上微盟APP員工意見及回復",
    // "CREATE_BY": 61270.0,
    // "USER_NAME": "宋亞輝(K007-資訊中心)",
    // "CREATE_DATE": "2021-06-01T10:46:55"
    columns = [
        {
            title: '公告名稱',
            dataIndex: 'NOTICE_TITLE',
            key: 'NOTICE_TITLE',
            ellipsis:true,
            width: 450
        },
        {
            title: '公告ID',
            dataIndex: 'NOTICE_ID',
            ellipsis:true,
            key: 'NOTICE_ID'
        },
        {
            title: '用戶名稱',
            dataIndex: 'USER_NAME',
            key: 'USER_NAME',
            ellipsis:true,
            width:260
        },
        {
            title:'用戶工號',
            dataIndex: 'PERSON_NO',
            ellipsis:true,
            key:'user_ID'
        },
        {
            title: "用戶IP",
            dataIndex: 'USER_IP',
            ellipsis:true,
            key: 'USER_IP'
        },
        {
            title: "訪問时间",
            dataIndex: 'CREATE_DATE_FORMAT',
            ellipsis:true,
            key: 'CREATE_DATE_FORMAT'
        },


    ]

    onChange=(moment,string)=>{
        this.startDate=string[0];
        this.endDate=string[1];
        // this.getDataByCondition(this.searchKey,this.startDate,this.endDate);
    }

    //表单对象
    formRef = React.createRef();

    onReset = () => {
        this.formRef.current.resetFields();
    };

    onFinish = (item) =>{debugger
        this.searchKey = item.noticeName==undefined?"":item.noticeName
        this.personNo = item.personNum==undefined?"":item.personNum
        this.startDate2 = this.startDate
        this.endDate2 = this.endDate
        this.setState({spinFlag:true},()=>{
            setTimeout(()=>{
                let result = API.getNoticeLog(this.searchKey,this.personNo,this.startDate2,this.endDate2,1,this.state.pageSize)
                this.setState({current:1,data:result.data,count:result.count,spinFlag:false})
            },100)
        })
        console.log(item)
    }

    onShowSizeChange(current, pageSize) {
        console.log(current, pageSize);
        this.setState({pageSize:pageSize})
        this.changePage(1,pageSize)
    }

    changePage(current,pageSize){
        let searchKey = this.searchKey==""?null:this.searchKey;
        let personNum = this.personNo==""?null:this.personNo;
        let startDate = this.startDate2==""?null:this.startDate2;
        let endDate = this.endDate2==""?null:this.endDate2;
        let result = API.getNoticeLog(searchKey,personNum,startDate,endDate,current,pageSize);
        this.setState({data:result.data,count:result.count,current:current});
    }

    paginationProps =_=> {
        const total = this.state.count
        const pageSize = this.state.pageSize
        return {
            current:this.state.current,
            showSizeChanger: true,//设置每页显示数据条数
            showQuickJumper: false,
            // showTotal: () => `共${this.state.count}条`,
            pageSize: pageSize,
            total: total,  //数据的总的条数
            onChange: (current) => this.changePage(current,pageSize), //点击当前页码
            onShowSizeChange: (current, pageSize) => {//设置每页显示数据条数，current表示当前页码，pageSize表示每页展示数据条数
                console.log(pageSize);
                this.onShowSizeChange(current, pageSize)
            }
        }
    }

    render() {
        return (
            <Spin tip="Loading..." spinning={this.state.spinFlag}>
                <div style={{marginBottom:"1rem" }}>
                    <Form
                        ref={this.formRef}
                        onFinish={this.onFinish}
                        onReset={this.onReset}
                        style={{display:"inline"}}
                        layout={"inline"}
                    >
                        <Form.Item
                            name="accessNum"
                            label="訪問記錄"
                            style={{display:"inline"}}
                        >
                            共{this.state.count}筆數據
                        </Form.Item>
                        <Form.Item
                            name="dateBorder"
                            label="時間範圍"
                            style={{display:"inline"}}
                        >
                            <RangePicker allowClear showTime style={{ width: 220 }} onChange={this.onChange}/>
                        </Form.Item>
                        <Form.Item
                            name="noticeName"
                            label="公告名稱"
                            style={{display:"inline"}}
                        >
                            <Input allowClear style={{ width: 120 }}/>
                        </Form.Item>
                        <Form.Item
                            name="personNum"
                            label="用戶工號"
                            style={{display:"inline"}}
                            // rules={[
                            //     ({ getFieldValue }) => ({
                            //         validator(_, value) {
                            //             if (!isNaN(value)||value==undefined||value=="") {
                            //                 return Promise.resolve();
                            //             } else{
                            //                 return Promise.reject(new Error('工號格式不符'));
                            //             }
                            //         },
                            //     }),
                            // ]}
                        >
                            <Input allowClear style={{ width: 120 }}/>
                        </Form.Item>
                        <Form.Item
                            label="查詢"
                            name="commit"
                            style={{display:"inline"}}
                        >
                            <Button type="primary" htmlType="submit">
                                提交
                            </Button>
                            <Button htmlType="reset" style={{marginLeft:"1rem"}}>
                                重置
                            </Button>
                        </Form.Item>
                    </Form>
                </div>
                <Table  columns={this.columns} dataSource={this.state.data}  scroll={{x: '80vw'}} pagination={this.paginationProps()} style={{marginRight:"2rem"}}/>
            </Spin>
        )

    }
}
